<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Canvas_鼠标移动炫彩小球</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        img {
            border: 0;
        }

        ol, ul, li {
            list-style: none;
        }

        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id="mycanvas" width="1000" height="600"></canvas>
<script type="text/javascript">
    var mycanvas = document.getElementById("mycanvas");
    var ctx = mycanvas.getContext("2d");

    /**
     * 初始化圆形实例
     * @param x 横坐标
     * @param y 纵坐标
     * @param r 球体半径
     * @constructor
     */
    function Circle(x, y, r) {
        this.x = x;
        this.y = y;
        this.r = parseInt(Math.random() * 10 + 20, 10);
        // 颜色的取值范围
        this.color = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
        //随机方向
        this.dx = Math.floor(Math.random() * (12 - 6 + 1)) - 6;
        this.dy = Math.floor(Math.random() * (12 - 6 + 1)) - 6;
        //往数组中push自己
        circleArr.push(this);
    }

    //渲染
    Circle.prototype.render = function () {
        //新建一条路径
        ctx.beginPath();
        //创建一个圆
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
        //设置样式颜色
        ctx.fillStyle = this.color;
        //通过填充路径的内容区域生成实心的图形
        ctx.fill();
    }
    //更新
    Circle.prototype.update = function () {
        this.x += this.dx;
        this.y += this.dy;
        this.r--;
        if (this.r < 0) {
            for (var i = 0; i < circleArr.length; i++) {
                if (circleArr[i] === this) {
                    circleArr.splice(i, 1); //删除无效球体
                }
            }
            return false;
        }
        return true;
    }
    //创建一个数组
    var circleArr = [];
    //鼠标移动事件
    mycanvas.onmousemove = function (event) {
        new Circle(event.clientX, event.clientY, 30);
    }
    //设置定时器每20毫秒更新和渲染
    setInterval(function () {
        ctx.clearRect(0, 0, 1000, 600);
        for (var i = 0; i < circleArr.length; i++) {
            circleArr[i].update() && circleArr[i].render();
        }
    }, 20);
</script>
</body>
</html>